<template>
  <div>
    <section>
      <div class="wrapper">
        <div class="container">
          <div class="showBox">
            <div class="circle"></div>
            <div class="blue">
              <div class="content">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
              </div>
            </div>
            <div class="purple">
              <div class="content">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
              </div>
            </div>
            <p class="p404">404</p>
            <p class="p404">404</p>
          </div>
          <div class="text">
            <article>
              <p>嗨！看起来您迷路了<br>欢迎您来到404</p>
            </article>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

    <style scoped>
@keyframes circle {
    0% {
        width: 0;
        height: 0;
    }
}
.showBox .circle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 800px;
    border-radius: 50%;
    background-color: rgba(207, 106, 135, 0.4);
    box-shadow: inset 5px 20px 40px rgb(207 106 135 / 25%),
        inset 5px 0px 5px rgb(190 130 160 / 30%),
        inset 5px 5px 20px rgb(190 130 160 / 25%),
        2px 2px 5px rgb(255 255 255 / 20%);
    animation: circle 0.8s cubic-bezier(1, 0.06, 0.25, 1) backwards;
}
.showBox .blue .content .line {
    background: linear-gradient(90deg, #ff7675 13.7%, #d63031 94.65%);
}
.showBox .blue .content .line,
.showBox .purple .content .line {
    display: flex;
    position: absolute;
    width: 200px;
    height: 80px;
    border-radius: 80px;
    z-index: 1;
    animation: lineLeft 8s cubic-bezier(1, 0.06, 0.25, 1) infinite both;
}
@keyframes lineLeft {
    50% {
        left: 80%;
        width: 10%;
    }
}
.showBox .blue .content .line:nth-child(1) {
    right: 15%;
    top: 18%;
    height: 30px;
    width: 120px;
    animation-delay: 0.5s;
    animation-name: lineRight;
}
@keyframes anime404 {
    0% {
        opacity: 0;
        transform: scale(10) skew(20deg, 20deg);
    }
}
<p class="p404">404</p>//真正显示的404
<p class="p404">404</p>//阴影
    </style>